<template>
    <div class="box_content">
      <el-row :gutter="24">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <!-- <el-col :span="5">
            <el-form-item label="缴费流水号" prop="paymetnFlowNo">
              <el-input v-model="formData.paymetnFlowNo" placeholder="请输入缴费流水号" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="5">
            <el-form-item label="缴费状态" prop="status">
              <el-select v-model="formData.status" placeholder="请输入缴费状态" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label"
                  :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="5">
            <el-form-item label="支付方式" prop="paymentType">
              <el-select v-model="formData.paymentType" placeholder="请输入支付方式" clearable
                :style="{width: '100%'}">
                <el-option v-for="(item, index) in paymentTypeOptions" :key="index" :label="item.label"
                  :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="5">
            <el-form-item label="支付金额" prop="payAmt">
              <el-input v-model="formData.payAmt" placeholder="请输入支付金额" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="5">
            <el-form-item label="机构编号" prop="groupId">
              <el-input v-model="formData.groupId" placeholder="请输入机构编号" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="5">
            <el-form-item label="收费项目编号" prop="projectId">
              <el-input v-model="formData.projectId" placeholder="请输入收费项目编号" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="户号" prop="loginInfo">
              <el-input v-model="formData.loginInfo" placeholder="请输入户号" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="5">
            <el-form-item label="缴费小类" prop="billItemId">
              <el-input v-model="formData.billItemId" placeholder="请输入缴费小类" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="5">
            <el-form-item size="large">
              
            </el-form-item>
          </el-col> -->
        </el-form>
        
      </el-row>
      <div class="button_box">
            <el-button type="primary" @click="submitForm">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>
      <el-table  :cell-style="rowStyle"  :data="tableDataShow"    border    style="width: 100%">
        <!-- <el-table-column fixed  prop="paymetnFlowNo" label="缴费流水号"   align="center"></el-table-column> -->
        <el-table-column fixed  prop="loginInfo" label="缴费户号"   align="center"></el-table-column>
        <!-- <el-table-column  prop="status" label="状态" width="150"    align="center"></el-table-column>
        <el-table-column prop="paymentType" label="支付方式" width="150"  align="center"></el-table-column> -->
        <el-table-column prop="payAmt" label="应缴金额" width="150"  align="center"></el-table-column>
        <el-table-column prop="groupId" label="机构编号"  align="center"></el-table-column>
        <el-table-column prop="groupName" label="机构名称"  align="center"></el-table-column>
        <el-table-column prop="projectId" label="收费项目编号"   align="center"></el-table-column>
        <el-table-column prop="projectName" label="收费项目名称"   align="center"></el-table-column>
        <!-- <el-table-column prop="billItemId" label="缴费小类"   align="center"></el-table-column> -->
        <el-table-column fixed="right" label="操作" width="100" align="center" >
        <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
        </template>
        </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            align="right"
            margin="20px"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
        <!-- 弹窗组件 -->
        <el-dialog title='缴费单详情' center :visible.sync='dialogStatus' :before-close='outClose' append-to-body>
            <el-table>
                <el-form :model='formData' label-width='120px'>
                    <el-form-item label='收费项目名称：'>
                        {{ detailObj.projectName }}
                    </el-form-item>
                    <el-form-item label='缴费流水号：'>
                        {{ detailObj.paymetnFlowNo }}
                    </el-form-item>
                    <el-form-item label='缴费状态'>
                        {{ detailObj.status }}
                    </el-form-item>
                    <el-form-item label='缴费方式：'>
                        {{ detailObj.paymentType }}
                    </el-form-item>
                    <el-form-item label='缴费金额：'>
                        {{ detailObj.payAmt }}
                    </el-form-item>
                    <el-form-item label='机构编号：'>
                        {{ detailObj.groupId }}
                    </el-form-item>
                    <el-form-item label='机构名称：'>
                        {{ detailObj.groupName }}
                    </el-form-item>
                    <el-form-item label='机构编号：'>
                        {{ detailObj.projectId }}
                    </el-form-item>
                    <el-form-item label='机构编号：'>
                        {{ detailObj.projectName }}
                    </el-form-item>
                    <el-form-item label='户号：'>
                        {{ detailObj.loginInfo }}
                    </el-form-item>
                    <!-- <el-form-item label='姓名'>
                        <el-input v-model='detailObj.name'></el-input>
                    </el-form-item>
                    <el-form-item label='地址'>
                        <el-input v-model='detailObj.address'></el-input>
                    </el-form-item> -->
                </el-form>
            </el-table>
            
            <span slot='footer'>
                <el-button @click='dialogStatus=false'>关闭</el-button>
            </span>
        </el-dialog>
    </div>
    
  </template>
  <script>
  export default {
    inheritAttrs: false,
    components: {},
    props: [],
    data() {
      return {
        dialogStatus:false,
        detailObj:{},
        pageSize:10,
        pageNum:1,
        currentPage:1,
        formData: {
          paymetnFlowNo: '',
          status: '000',
          paymentType: '00',
          payAmt: '',
          groupId: '',
          projectId: '',
          billItemId: '',
          loginInfo:'',
        },
        rules: {
          paymetnFlowNo: [],
          status: [],
          paymentType: [],
          payAmt: [],
          groupId: [],
          projectId: [],
          billItemId: [],
        },
        statusOptions: [{
          "label": "请选择",
          "value": "000"
        },{
          "label": "待付款",
          "value": "00"
        }, {
          "label": "已付款",
          "value": "01"
        }, {
          "label": "部分退款",
          "value": "02"
        }, {
          "label": "已退款",
          "value": "03"
        }],
        paymentTypeOptions: [{
          "label": "请选择",
          "value": "00"
        }, {
          "label": "银行卡",
          "value": "01"
        }, {
          "label": "微信",
          "value": "02"
        }, {
          "label": "支付宝",
          "value": "03"
        }],
        tableData: [{
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },{
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付4',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付5',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        },
        {
            paymetnFlowNo:'20231022135135',
            status:'已付款',
            paymentType:'微信支付',
            payAmt:'10.00',
            groupId:'000001',
            groupName:'中国建设银行',
            projectId:'120125431',
            projectName:'南方电网',
            loginInfo:'1122334455',
            billItemId:'电费'
        }],
        tableDataShow:[]
      }
    },
    computed: {
        total: function(){
            return this.tableData.length;
        },
        statusObj: function(){
            let obj = new Object();
            for(item of this.statusOptions){
                obj[item.value] = item.label;
            }
            console.log(obj)
            return obj
        },
        paymentTypeOj: function(){
            let obj = new Object();
            for(item of this.statusOptions){
                obj[item.value] = item.label;
            }
            console.log(obj)
            return obj
        }
    },
    watch: {},
    created() {},
    mounted() {
        this.tableDataShow = this.getList(this.tableData,this.pageNum,this.pageSize)
    },
    methods: {
        /**
         * 分页数据处理
         * @param data [Array] 需要分页的数据
         * @param num [Number] 当前第几页
         * @param size [Number] 每页显示多少条
         */
         getList(data, num, size) {
            let list, start, end
            start = (num - 1) * size
            end = start + size
            list = data.filter((item, index) => {
                return index >= start && index < end
            })
            list.forEach((item, index) => {
                item.seq = index + start
            })
            return list
        },
        /**
         * 根据条件查询
         * 
         */
        getSearchList(data){
            let list;
            list = data.filter((item, index) => {
                // if(item.)
                // return index >= start && index < end
            })
        },
        // 表格居中
        rowStyle() {
            return "text-align:center";
        },
        submitForm() {
            this.$refs['elForm'].validate(valid => {
            if (!valid) return
            else{
                console.log('在这里获取查找项的信息')
            }
            // TODO 提交表单
            })
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        },
        handleClick(row) {
            console.log(row);
            this.detailObj = row;
            this.dialogStatus = true;
        },
        close() {
            this.dialogStatus = false;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.tableDataShow = this.getList(this.tableData,this.pageNum,this.pageSize)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val;
            this.tableDataShow = this.getList(this.tableData,this.pageNum,this.pageSize)
        },
        onOpen() {},
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.$emit('update:visible', false)
    },
    handleConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.close()
      })
    },
    }
  }
  
  </script>
  <style scoped  lang="scss">
  .box_content{
    padding-top: 5vh;
    padding-bottom: 5vh;
    padding-left: 5vw;
    padding-right: 5vw;
    .button_box{
            margin: auto;
            margin-top: 0px;
            margin-bottom: 20px;
            text-align: right;
        }
  }
  .block{
    margin-top: 20px;
  }
  </style>
  